<template>
  <div class="setUp_dailog">
    <ul class="setup_unit_list">
      <li v-for="(item, index) in dataArr" :key="index">
        <div class="setup_li">
          <span>{{item.name}}</span>
          <el-checkbox
            v-if="item.type!=405"
            style="float:right;"
            v-model="item.Mute"
            size="medium"
            :disabled="!item.switch"
          >静音</el-checkbox>
          <el-switch
            :class="item.type==405 ? 'setup_li_switch_405' : 'setup_li_switch'"
            v-model="item.switch"
            active-color="#0F4286"
            inactive-color="#3E475D"
            @change="heighRisk(item)"
          ></el-switch>
        </div>
      </li>
      <!-- 只显示正确的AI识别照 -->
      <li>
        <div class="setup_li">
          <span>只显示正确的AI识别照</span>
          <el-switch class="setup_li_switch" v-model="showCorrectPic" active-color="#0F4286" inactive-color="#3E475D"></el-switch>
        </div>
      </li>
      <li>
        <div class="setup_li build-top">
          <span>建筑物顶部</span>
          <div class="setup_radio">
            <el-radio v-model="buildTop" label="1">显示报警设备数</el-radio>
            <el-radio v-model="buildTop" label="2">显示设备正常率</el-radio>
          </div>
        </div>
      </li>
    </ul>
    <el-button class="setup_save" type="primary" @click="saveSetup(dataArr)">保存</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataArr: [],
      showCorrectPic: this.$store.state.showCorrectPic,
      buildTop: '1',
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser,
    }
  },
  created() {
    let buildTops = localStorage.getItem('Build_Top')
    this.buildTop = buildTops ? buildTops : '1'
    this.$store.commit('setBuildMarkType', this.buildTop)
    let that = this
    that.dataArr = that.$Ctl.getPushConfig() || []
    //循环让0变false1变true
    for (let i = 0; i < that.dataArr.length; i++) {
      if (that.dataArr[i].switch == 1) {
        that.dataArr[i].switch = true
      } else {
        that.dataArr[i].switch = false
      }
      if (that.dataArr[i].Mute == 1) {
        that.dataArr[i].Mute = true
      } else {
        that.dataArr[i].Mute = false
      }
    }
  },
  methods: {
    //监听switch
    heighRisk(item) {
      //当false的时候颜色按钮颜色变灰
      // if (item.switch == false) {
      //     $(".setup_li_switch .el-switch__core:after").removeClass("el-switch__core")
      // }
      return !item.switch ? (item.Mute = 0) : item
    },
    //保存设置
    saveSetup(dataArr) {
      let that = this
      for (let i = 0; i < that.dataArr.length; i++) {
        if (that.dataArr[i].switch == false) {
          that.dataArr[i].switch = '0'
        } else {
          that.dataArr[i].switch = '1'
        }
        if (that.dataArr[i].Mute == false) {
          that.dataArr[i].Mute = '0'
        } else {
          that.dataArr[i].Mute = '1'
        }
      }
      that.$Ctl.setPushConfig(that.dataArr)
      this.$store.commit('setShowCorrectPic', this.showCorrectPic)
      localStorage.setItem('Build_Top', this.buildTop)
      this.$store.commit('setBuildMarkType', this.buildTop)
      if (this.$Ctl.isCs(true)) {
        if (this.buildTop == 1) {
          this.$Cs.markersShowCtrl('92', 1)
          this.$Cs.markersShowCtrl('51', 2)
        } else {
          this.$Cs.markersShowCtrl('51', 1)
          this.$Cs.markersShowCtrl('92', 2)
        }
      }
      that.$Ctl.message('修改成功！', 'success')
      that.$emit('closePopup')
    },
  },
}
</script>
<style lang="scss" scoped>
.setUp_dailog {
  position: relative;
  width: 360px;
  height: 450px;
  padding-right: 40px;
  color: white;
  .setup_li {
    margin-top: 25px;
  }
  .build-top {
    display: flex;
    align-items: center;
  }
  .setup_radio {
    margin-left: 72px;
    width: 10px;
  }
  .el-cascader-node > .el-radio,
  .el-radio:last-child {
    margin-top: 10px;
  }
  .setup_li span {
    color: #a3bedd;
    font-size: 20px;
    margin-left: 18px;
  }
  .el-checkbox__inner {
    background-color: #050e2f;
  }
  .el-checkbox {
    color: white;
  }
  .el-checkbox__label {
    font-size: 16px;
  }
  .setup_li_span {
    position: absolute;
    font-size: 20px;
    margin-left: 18px;
  }
  .setup_li .setup_li_switch {
    float: right;
    margin-right: 20px;
  }
  .setup_li .setup_li_switch_405 {
    float: right;
    right: 60px;
  }
  .setup_save {
    position: absolute;
    bottom: 18px;
    right: 30px;
  }
}
</style>
